<template>
  <!-- 截单 -->
  <a-modal :width="500" v-model:visible="showCutOfDialog" title="截单" :ok-loading="submitLoading" title-align="start" :mask-closable="false" @cancel="closedDialog" :on-before-ok="saveData">
    <div class="flex">
      <icon-exclamation-circle class="icon-warning warningColor" />
      <p>已选择 {{ list.length }} 个产品，其中可作废产品 {{ catOfList.length }} 条，作废后，未采购产品无法再进行采购，确认截单？</p>
    </div>
    <div>
      <p style="margin: 20px 0 10px; color: #999">
        <span class="warningColor">*</span>
        <span>截单原因</span>
      </p>
      <a-textarea v-model="result" style="height: 100px" placeholder="请填写截单原因" allow-clear />
    </div>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref, computed } from 'vue'
  import { Message } from '@arco-design/web-vue'
  import { cutoffStayPurchaseItem } from '@/api/purchase'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
    list: {
      type: Array,
      default: () => [],
    },
  })
  // 可截单的产品，支持待采购和部门下单
  const catOfList = computed(() => props.list.filter((el: any) => [20, 30].includes(el.status)))
  const showCutOfDialog = ref(props.isShow)
  const result = ref()
  const submitLoading = ref(false)

  // 选择产品
  async function saveData() {
    if (!result.value) {
      Message.error('必须填写截单原因')
      return false
    }
    let ids = catOfList.value.map((el: any) => el.id)
    if (!ids.length) {
      Message.error('没有可截单的产品！')
      return false
    }
    const res: any = await cutoffStayPurchaseItem({
      ids: catOfList.value.map((el: any) => el.id),
      cutoffMsg: result.value,
    })
    if (!res) return false
    Message.success('截单成功')
    emit('success')
    emit('closed')
  }
  // 关闭
  function closedDialog() {
    showCutOfDialog.value = false
    emit('closed')
  }
</script>
<style lang="less" scoped>
  .icon-warning {
    font-size: 18px;
    flex-shrink: 0;
    margin-right: 5px;
    margin-top: 2px;
  }
</style>
